<template>
  <view class="search-page">
    <up-navbar :safeAreaInsetTop="true" placeholder>
      <template #left>
        <view class=""></view>
      </template>
      <template #center>
        <view class="search-head">
          <up-search placeholder="搜索藏品名称或关键词" clearabled v-model="keyword" actionText="取消" @custom="oncustom"
            @search="onsearch" @clear="oncustom"></up-search>
        </view>
      </template>
    </up-navbar>
    <view class="search-nav">
      <view class="nav-head">
        <view :class="headActive === item.id ?'tab-active':'head-tab'" v-for="item,index in headList" :key="item.id"
          @click="onactive(item.id)">{{item.name}}
        </view>
      </view>
      <view class="nav-list" v-if="resultList.length !== 0">
        <view class="nav-content" v-for="item,index in resultList" :key="item.id" @click="onContent(item.id)">
          <view class="content-img">
            <image :src="item.task_image[0].image" mode="" class="image"></image>
          </view>
          <view class="content-info">
            <view class="info-status">
              <image src="@/static/home/image/truth.png" mode="" v-show="item.label ==1"></image>
              <image src="@/static/home/image/fake.png" mode="" v-show="item.label ==-1"></image>
              <image src="@/static/home/image/question.png" mode="" v-show="item.label ==2"></image>
            </view>
            <view class="info-head">
              <image :src="item.user?item.user.avatar:''" mode="" class="head-avatar"></image>
              <view class="head-name">{{item.user?item.user.nickname:''}}</view>
            </view>
            <view class="info-title">{{item.desc}}</view>
          </view>
        </view>
      </view>
      <view class="search-none" v-else>
        <image src="@/static/home/image/messageNone.png" mode="" class="none-img"></image>
        <view class="none-text">未搜索到相关结果</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    homeList
  } from '../api.js'
  import {
    ref
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const keyword = ref('')
  const resultList = ref([])
  const headList = ref([{
    name: '全部',
    id: 0,
  }, {
    name: '真品',
    id: 1
  }, {
    name: '赝品',
    id: '-1'
  }, {
    name: '存疑',
    id: 2
  }])
  const headActive = ref('')
  const offsetTop = ref(0)
  // #ifdef APP-PLUS
  let topHight = uni.getSystemInfoSync().statusBarHeight
  offsetTop.value = topHight + 64
  // #endif
  onLoad((e) => {
    if (e && e.keyword) {
      keyword.value = e.keyword
      homeListApi()
    }
  })

  const homeListApi = (async () => {
    const res = await homeList({
      search: keyword.value,
      label: headActive.value
    })
    if (res && res.code === 1) {
      resultList.value = res.data.data
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })

  function onactive(id) {
    headActive.value = id
    homeListApi()
  }

  function oncustom() {
    uni.navigateBack(-1)
  }

  function onsearch() {
    console.log(keyword.value);
  }

  function onContent(id) {
    uni.navigateTo({
      url: `/pages/index/identifyPage/identifyResult?id=${id}`
    })
  }
</script>

<style lang="scss" scoped>
  .search-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;

    .search-head {
      width: 750rpx;
      height: 128rpx;
      box-sizing: border-box;
      padding: 0 30rpx;
      display: flex;
      align-items: center;
    }

    .search-none {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #F2F2F2;

      .none-img {
        width: 240rpx;
        height: 240rpx;

      }

      .none-text {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        margin-top: 32rpx;
      }
    }

    .search-nav {
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow: scroll;
      background-color: #F2F2F2;

      .nav-head {
        width: 100%;
        height: 88rpx;
        display: flex;
        align-items: center;
        flex: 0 0 auto;

        .head-tab {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);

        }

        .tab-active {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);

        }
      }

      .nav-list {
        margin: 24rpx 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 30rpx;
        overflow: scroll;

        .nav-content {
          width: 336rpx;
          height: 464rpx;
          border-radius: 16rpx;
          background: #FFFFFF;
          margin-bottom: 20rpx;
          overflow: hidden;

          .content-img {
            width: 336rpx;
            height: 336rpx;
            position: relative;

            .img-mask {
              width: 336rpx;
              height: 336rpx;
              position: absolute;
              top: 0;
              left: 0;
              background: rgba(0, 0, 0, 0.6);
              opacity: 0.6;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              z-index: 1;

              .mask-title {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                margin-top: 12rpx;
              }
            }

            .image {
              width: 336rpx;
              height: 336rpx;
            }
          }

          .content-info {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 20rpx;
            position: relative;

            .info-status {
              position: absolute;
              right: 16rpx;
              top: -46rpx;
              height: 96rpx;
              width: 96rpx;
              border-radius: 50%;
              z-index: 1;
              background-color: #FFFFFF;
              display: flex;
              align-items: center;
              justify-content: center;

              image {
                height: 80rpx;
                width: 80rpx;
              }
            }

            .info-head {
              display: flex;
              align-items: center;

              .head-avatar {
                height: 36rpx;
                width: 36rpx;
                border-radius: 50%;
              }

              .head-name {
                font-size: 24rpx;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
                margin-left: 8rpx;
              }
            }

            .info-title {
              font-size: 26rpx;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              margin-top: 12rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
</style>